/* 菜单管理 */
<template>
  <div>
     <Tabs type="card" closable @on-tab-remove="handleTabRemove">
        <TabPane label="菜单管理" v-if="tab1" class="management">
          <Tabs value="name1">
            <TabPane label="管控系统" name="name1">
              <Card :bordered="false">
                <p slot="title">管控系统菜单管理</p>
                <Table border :columns="columns7" :data="data6"></Table>
                <Row type="flex" justify="end" style="padding-top: 10px">
                  <Col span="24">
                  <Page :total="100" show-total style="float: right;" />
                  </Col>
                </Row>
              </Card>
            </TabPane>
            <TabPane label="后台系统" name="name2">
              <Card :bordered="false">
                <p slot="title">后台系统菜单管理</p>
                <Table border :columns="columns7" :data="data6"></Table>
                <Row type="flex" justify="end" style="padding-top: 10px">
                  <Col span="24">
                  <Page :total="100" show-total style="float: right;" />
                  </Col>
                </Row>
              </Card>
            </TabPane>
          </Tabs>
        </TabPane>
      </Tabs>
       <Modal
          v-model="modal1"
          title="Common Modal dialog box title"
          @on-ok="ok"
          @on-cancel="cancel">
          <p>Content of dialog</p>
          <p>Content of dialog</p>
          <p>Content of dialog</p>
      </Modal>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tab0: true,
      tab1: true,
      modal1: false,
      social: [],
      showHeader: false,
      iconImg1: require("@/assets/images/indexIcon-1.png"),
      iconImg2: require("@/assets/images/indexIcon-2.png"),
      iconImg3: require("@/assets/images/indexIcon-3.png"),
      iconImg4: require("@/assets/images/indexIcon-4.png"),
      columns1: [
        {
          title: "职位名称",
          key: "position",
          align: "center"
        },
        {
          title: "姓名",
          key: "name",
          align: "center"
        },
        {
          title: "管理权限",
          key: "jurisdiction",
          align: "center"
        },
        {
          title: "联系电话",
          key: "phone",
          align: "center"
        },
        {
          title: "账号密码",
          align: "center",
          render: (h, params) => {
            return h(
              "Select",
              {
                props: {
                  value: ""
                },
                on: {
                  "on-change": event => {}
                }
              },
              [
                h(
                  "Option",
                  {
                    props: {
                      value: "1"
                    }
                  },
                  "账号：zhangsan"
                ),
                h(
                  "Option",
                  {
                    props: {
                      value: "2"
                    }
                  },
                  "账号：lisi"
                )
              ]
            );
          }
        },
        {
          title: "操作",
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px",
                    color: "#ffffff",
                    background: "#2996ff",
                    border: "none",
                    padding: "0px 5px"
                  },
                  on: {
                    click: () => {
                      this.show(params.index);
                    }
                  }
                },
                "查看"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px",
                    color: "#ffffff",
                    background: "#19be6b",
                    border: "none",
                    padding: "0px 5px"
                  },
                  on: {
                    click: () => {
                      this.show(params.index);
                    }
                  }
                },
                "修改"
              )
            ]);
          }
        }
      ],
      data1: [
        {
          position: "系统管理员",
          name: "张三"
        },
        {
          position: "系统管理员",
          name: "张三"
        },
        {
          position: "系统管理员",
          name: "张三"
        }
      ],
      columns2: [
        {
          title: "序号",
          key: "num"
        },
        {
          title: "所属一级账号",
          key: "affiliation"
        },
        {
          title: "创建的二级账号",
          key: "secondLevel"
        },
        {
          title: "创建日期",
          key: "data"
        }
      ],
      data2: [
        {
          num: "1",
          affiliation: "",
          secondLevel: "王五 | 部门经理",
          data: "2016-10-03"
        },
        {
          num: "2",
          affiliation: "",
          secondLevel: "王五 | 部门经理",
          data: "2016-10-03"
        },
        {
          num: "3",
          affiliation: "",
          secondLevel: "王五 | 部门经理",
          data: "2016-10-03"
        },
        {
          num: "4",
          affiliation: "",
          secondLevel: "王五 | 部门经理",
          data: "2016-10-03"
        },
        {
          num: "5",
          affiliation: "",
          secondLevel: "王五 | 部门经理",
          data: "2016-10-03"
        },
        {
          num: "6",
          affiliation: "",
          secondLevel: "王五 | 部门经理",
          data: "2016-10-03"
        },
        {
          num: "7",
          affiliation: "",
          secondLevel: "王五 | 部门经理",
          data: "2016-10-03"
        },
        {
          num: "8",
          affiliation: "",
          secondLevel: "王五 | 部门经理",
          data: "2016-10-03"
        },
        {
          num: "9",
          affiliation: "",
          secondLevel: "王五 | 部门经理",
          data: "2016-10-03"
        },
        {
          num: "10",
          affiliation: "",
          secondLevel: "王五 | 部门经理",
          data: "2016-10-03"
        }
      ],

      columns7: [
        {
          type: "expand",
          width: 20,
          render: (h, params) => {
            return h(expandRow, {
              style: {
                padding: 0
              },
              props: {
                row: params.row
              }
            });
          }
        },
        {
          title: "菜单名称",
          key: "name",
          align: "center",
          render: (h, params) => {
            return h("div", [
              h("Icon", {
                props: {
                  type: "person"
                }
              }),
              h("strong", params.row.name)
            ]);
          }
        },
        {
          title: "权限标识",
          key: "jurisdiction",
          align: "center"
        },
        {
          title: "用户类型",
          key: "typeUser",
          align: "center"
        },
        {
          title: "是否展示",
          key: "select",
          align: "center",
          render: (h, params) => {
            return h("div", [
              h("Checkbox", {
                props: {
                  value: params.row.select
                },
                on: {
                  "on-change": val => {
                    console.log(val);
                  }
                }
              })
            ]);
          }
        },
        {
          title: "操作",
          key: "operation",
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px",
                    color: "#ffffff",
                    background: "#2996ff",
                    border: "none",
                    padding: "0px 5px"
                  },
                  on: {
                    click: () => {
                      this.show(params.index);
                    }
                  }
                },
                "添加子项"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px",
                    color: "#ffffff",
                    background: "#2996ff",
                    border: "none",
                    padding: "0px 5px"
                  },
                  on: {
                    click: () => {
                      console.log("asdfasdfasd");
                      this.modal1 = true;
                    }
                  }
                },
                "查看"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px",
                    color: "#ffffff",
                    background: "#ed4014",
                    border: "none",
                    padding: "0px 5px"
                  },
                  on: {
                    click: () => {
                      this.cancel(params.index);
                    }
                  }
                },
                "删除"
              )
            ]);
          }
        }
      ],
      data6: [
        {
          name: "我的项目",
          typeUser: "管理员",
          select: true
        },
        {
          name: "会员中心",
          typeUser: "管理员",
          select: true
        },
        {
          name: "消息中心",
          typeUser: "管理员",
          select: true
        },
        {
          name: "关于我们",
          typeUser: "管理员",
          select: true
        }
      ]
    };
  },
  methods: {
    ok() {
      this.$Message.info("Clicked ok");
    },
    cancel() {
      this.$Message.info("Clicked cancel");
    },
    handleTabRemove(name) {
      this["tab" + name] = false;
    },
    show(index) {
      console.log(index);
    },
    selectChange() {
      console.log("asdfasd");
    },
    rowClick() {
      this.$router.push("/admin/main/IndexOperation");
    },
    cancel(index) {
      this.$Message.info({
        content: "点选删除后，操作不可逆",
        duration: 10,
        closable: true
      });
    }
  }
};
</script>

<style scoped>
</style>
